<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Products box list demo</title>
<style type="text/css" media="screen, print">
*{margin:0; padding:0;}
body{	
	font-family:Arial, Helvetica, sans-serif;
	font-size:62.5%;
	background:#FFF;
	color:#222;
	padding:20px;
}
#wrapper{width:800px; margin:0 auto}
ul{list-style:none}
#pimgListArea{width:672px; }
.pimgList li{display:block; width:100px; height: 100px; border:1px solid #ccc; float:left; margin: 0 10px 10px 0; font-size:3.8em; color:#ccc; }
.pimgList li#first{width: 212px; height:212px; background:#CCC; color:#FFF; font-size:20em; text-align:center;}

</style>
</head>

<body>
<div dir="wrapper">
	<div id="pimgListArea">
    	<ul class="pimgList">
        	<li id="first">A</li>
            <script type="text/javascript">
				for (i = 1; i <= 14; i++)
					{
					document.write("<li>"+i+"</li>")
					}
			</script>
        </ul>
    </div>
</div>
</body>
</html>
